<template>
    <div class="todo-container">
        <div class="todo-wrap">
            <!--方式一：-->
            <!--<TodoHeader @addTodo="addTodo" />-->
            <!--方式二：-->
            <TodoHeader ref="mytestRef" />
            <TodoList :todoLists="todoLists" />
            <!--<TodoFooter :selectAll="selectAll" :todoLists="todoLists" :deletAllComplete="deletAllComplete"/>-->
            <TodoFooter>
                <input slot="check" type="checkbox" v-model="isAllSelectComputed"/>
                <span slot="count">已完成{{todoComplete}} / 全部{{todoLists.length}}</span>
                <button slot="deletebtn" class="btn btn-danger" @click="deletAllComplete" v-show="todoComplete">清除已完成任务</button>
            </TodoFooter>
        </div>
    </div>
</template>

<script>
    import TodoHeader from './components/TodoHeader'
    import TodoList from './components/TodoList'
    import TodoFooter from './components/TodoFooter'
    import PubSub from  'pubsub-js'
    import storageUtil from './util/storageUtil'
    // 导出单个方法时候 名字要和导出的一致
    // import { setStorage } from './util/storageUtil'

    export default {
        name: "App",
        // components:['TodoHeader','TodoList','TodoFooter']
        components:{
            TodoHeader,
            TodoList,
            TodoFooter
        },
        data () {
            return {
                // 从localstorage读取
                // todoLists 改变的时候 就存 要用到 深度监视，一般监视只能监视todoList
                /*todoLists:[
                    {todocont:'one',complete:false},
                    {todocont:'two',complete:false},
                    {todocont:'three',complete:false}
                ]*/
                todoLists:storageUtil.getStorage()
            }
        },
        watch:{
            // 深度监视
            todoLists:{
              deep:true,
              handler: function (val) {
                  // window.localStorage.setItem('todos_key',JSON.stringify(val));
                  storageUtil.setStorage(val)
                  // 导出单个方法
                  // setStorage(val)
              },
                // 14K写法
              // handler:storageUtil.setStorage
          }
        },
        mounted () {
          this.$refs.mytestRef.$on('addTodo',data =>{
              this.todoLists.unshift(data);
          });

          // 发布订阅模式
            PubSub.subscribe('deletTodo',(msg,index) => {
                this.todoLists.splice(index,1);
            })
        },
        computed:{
            todoComplete () {
                // return this.todoLists.filter( item => item.complete).length;
                // 累加器
                return this.todoLists.reduce((proTotal,item) => {
                    return proTotal+(item.complete?1:0);
                },0);
            },
            isAllSelectComputed:{
                get () {
                    return this.todoComplete==this.todoLists.length && this.todoLists.length;
                },
                set (value) {
                    console.log(value)
                    this.selectAll(value);
                }
            }
        },
        methods:{
            // 1、增
            /*addTodo (data) {
                this.todoLists.unshift(data);
            },*/
            // 删
            /*deletTodo (index) {
                this.todoLists.splice(index,1);
            },*/
            // 全选
            selectAll (isSelect) {
                this.todoLists.forEach( item => {
                    item.complete = isSelect
                })
            },
            // 全删已完成的
            deletAllComplete () {
                if(window.confirm('确定删除所有已选项目吗？')){
                    this.todoLists=this.todoLists.filter(item => !item.complete);
                }
            },
        }
    }
</script>

<style lang="stylus" scoped>
    /*app*/
    .todo-container {
        width: 600px;
        margin: 0 auto;
    }
    .todo-container .todo-wrap {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
</style>